<template>
  <div class="container">
    <div class="row">
      <!-- 左侧 -->
      <div class="col-8">
        <h5>基本信息</h5>
        <form>
          <div class="form-group row">
            <label
              class="col-sm-2 col-form-label"
              for="input-nick"
            >昵称</label>
            <div class="col-sm-10">
              <input
                class="form-control"
                id="input-nick"
                placeholder="请输入昵称"
                type="text"
                v-model="userInfo.username"
              />
            </div>
          </div>
          <div class="form-group row">
            <label
              class="col-sm-2 col-form-label"
              for="input-city"
            >城市</label>
            <div class="col-sm-10">
              <input
                class="form-control"
                id="input-city"
                placeholder="请输入城市"
                type="text"
                v-model="userInfo.city"
              />
            </div>
          </div>
          <div class="form-group row">
            <label
              class="col-sm-2 col-form-label"
              for="input-gender"
            >性别</label>
            <div class="col-sm-10">
              <input
                class="form-control"
                id="input-gender"
                placeholder="请输入城市"
                type="text"
                v-model="userInfo.gender"
              />
            </div>
          </div>
          <div class="form-group row">
            <label
              class="col-sm-2 col-form-label"
              for="input-bitrh"
            >生日</label>
            <div class="col-sm-10">
              <input
                class="form-control"
                id="input-bitrh"
                placeholder="出生日期"
                type="text"
                v-model="userInfo.birthday"
              />
            </div>
          </div>
          <div class="form-group row">
            <label
              class="col-sm-2 col-form-label"
              for="file-picture"
            >头像</label>
            <div class="col-sm-10">
              <img
                :src="userInfo.avatar"
                alt="用户头像"
                class="margin-bottom-10"
                id="img-picture"
                style="width: 80px; margin-bottom: 10px"
              />
              <input
                @change="fileChange"
                accept="image/*"
                class="form-control-file"
                id="file-picture"
                ref="fileSelect"
                type="file"
              />
            </div>
          </div>
          <center>
            <button
              @click.prevent="updateBaseInfo"
              class="btn btn-primary"
            >保存</button>
          </center>
        </form>

        <hr />
        <h5 class="margin-bottom-10">修改密码</h5>
        <form>
          <div class="form-group row">
            <label
              class="col-sm-2 col-form-label"
              for="input-cur-password"
            >当前密码</label>
            <div class="col-sm-10">
              <input
                class="form-control"
                id="input-cur-password"
                placeholder="请输入当前密码"
                type="password"
                v-model="password"
              />
            </div>
          </div>
          <div class="form-group row">
            <label
              class="col-sm-2 col-form-label"
              for="input-new-password"
            >新密码</label>
            <div class="col-sm-10">
              <input
                class="form-control"
                id="input-new-password"
                placeholder="请输入新密码"
                type="password"
                v-model="newPassword.first"
              />
            </div>
          </div>
          <div class="form-group row">
            <label
              class="col-sm-2 col-form-label"
              for="input-new-password-repeat"
            >确认密码</label>
            <div class="col-sm-10">
              <input
                class="form-control"
                id="input-new-password-repeat"
                placeholder="请输入确认密码"
                type="password"
                v-model="newPassword.second"
              />
            </div>
          </div>
          <center>
            <button
              @click.prevent="updatePwd"
              class="btn btn-primary"
            >提交</button>
          </center>
        </form>
      </div>
      <!-- 左侧结束 -->

      <!-- 右侧 -->
      <div class="col-4">
        <center>
        <button
          @click.prevent="onLogout"
          class="btn btn-danger"
        >退出登录</button>
        </center>
      </div>
      <!-- 右侧结束 -->
    </div>
  </div>
</template>

<script>
import { ref, getCurrentInstance, reactive } from "vue";
import { upload, updateInfo, updatePassword, logout } from "../../network/user";

export default {
  name: "Setting",
  components: {},
  setup() {
    const { ctx } = getCurrentInstance();
    const userInfo = reactive({ ...ctx.$store.state.userInfo }); //用户信息
    const fileSelect = ref(null); //文件选择DOM
    const password = ref(null); //旧密码
    const newPassword = reactive({
      first: null,
      second: null,
    }); //新密码

    //上传头像
    const fileChange = async () => {
      const file = fileSelect.value.files[0];
      // const avatarUrl = window.URL.createObjectURL(file)
      // userInfo.avatar = avatarUrl
      const uploadObj = new FormData();
      uploadObj.append("file", file);
      const result = await upload(uploadObj);
      userInfo.avatar = "http://47.95.5.129:8000" + result.data.url;
    };

    //更新用户基本信息
    const updateBaseInfo = async () => {
      const result = await updateInfo(userInfo);
      if (result.status !== 200) {
        return alert(result.message);
      }
      alert(result.data);
      ctx.$store.commit("setUserInfo", userInfo);
    };
    //更新用户密码
    const updatePwd = async () => {
      if (!password.value) {
        return alert("请输入当前密码");
      }
      if (newPassword.first !== newPassword.second || !newPassword.first) {
        return alert("两次密码不一致");
      }
      const data = {
        id: userInfo.id,
        password: password.value,
        newPassword: newPassword.first,
      };
      const result = await updatePassword(data);
      password.value = newPassword.first = newPassword.second = null;
      if (result.status !== 200) {
        return alert(result.message);
      }
      alert(result.data);
    };

    // 退出登录
    const onLogout = async () => {
      const isLogout = confirm('确认退出?')
      if(!isLogout) {
        return
      }
      const result = await logout()
      if(result !== true) {
        return alert('退出失败')
      }
      ctx.$router.push('/login')
    }

    return {
      fileSelect,
      userInfo,
      fileChange,
      updateBaseInfo,
      password,
      newPassword,
      updatePwd,
      onLogout
    };
  },
};
</script>

<style scoped lang='stylus' >
.container
  margin-top 10px
</style>